<template>
	<view>
		<bnn-loading :loading="isLoading" />
		<view class="wrap" @click="show=true">
			<u-field v-model="mobile" label="时间:" :disabled="true" placeholder="请选择日期" right-icon="calendar"></u-field>
			<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		</view>
		<view class="card-body">
			<!-- 成交 -->
			<view class="card-table" v-if="type === 0">
				<view class="table-tr">
					<view class="table-th1" width="20%">成交时间</view>
					<view class="table-th2" width="30%">品种合约</view>
					<view class="table-th3" width="15%">类型</view>
					<view class="table-th4" width="10%">数量</view>
					<view class="table-th5" width="25%">价格</view>
				</view>
				<view v-for="(item, key) in moreData" :key="key" class="table-tr tr_bottom">
					<view class="table-td1" width="20%">{{item.date}}</view>
					<view class="table-td2" width="30%">{{item.qihuoname}}</view>
					<view class="table-td3" width="15%" v-if="item.o_c==0&&item.b_s==0"><text class="more_text"
							:class="item.b_s==item.o_c?'greenbackground':'redbackground'">卖跌</text></view>
					<view class="table-td3" width="15%" v-else-if="item.o_c==1&&item.b_s==0"><text class="more_text"
							:class="item.b_s==item.o_c?'greenbackground':'redbackground'">买涨</text></view>
					<view class="table-td3" width="15%" v-else-if="item.o_c==1&&item.b_s==1"><text class="more_text"
							:class="item.b_s==item.o_c?'greenbackground':'redbackground'">买跌</text></view>
					<view class="table-td3" width="15%" v-else><text class="more_text"
							:class="item.b_s==item.o_c?'greenbackground':'redbackground'">卖涨</text></view>
					<view class="table-td4" width="10%">{{item.lots}}</view>
					<view class="table-td5" width="25%">{{item.price}}</view>
				</view>
			</view>
			<!-- 平仓 -->
			<view class="card-body">
				<!--<u-table class="card-table">
					<u-tr class="table-tr">
						<u-th class="table-th close1">开平日期</u-th>
						<u-th class="table-th close2">品种合约</u-th>
						<u-th class="table-th close3">类型</u-th>
						<u-th class="table-th close4">数量</u-th>
						<u-th class="table-th close5">开平价</u-th>
						<u-th class="table-th close6">平仓盈亏</u-th>
					</u-tr>
					<view class="">
						<u-tr v-for="(item, key) in closeList" :key="key" class="table-tr tr_bottom"
							style="height: 60px">
							<u-td class="table-td close1">
								{{item.open_date ? item.open_date : '-'}}<br />——<br />{{item.close_date ? item.close_date : '-'}}
							</u-td>
							<u-td class="table-td close2">{{item.qihuoname}}</u-td>
							<u-td class="table-td close3" v-if="item.b_s=='买'"> <text
									class="text_back redbackground">买</text></u-td>
							<u-td class="table-td close3" v-else><text class="text_back greenbackground">卖</text></u-td>
							<u-td class="table-td close4">{{item.positon}}</u-td>
							<u-td class="table-td close5">
								{{formatNum(item.open_price)}}<br />——<br />{{formatNum(item.trans_price)}}
							</u-td>
							<u-td class="table-td close6">{{formatNum(item.profit_loss)}}</u-td>
						</u-tr>
						<view v-if="closeList.length==0" class="notable">暂无数据</view>
					</view>
				</u-table>
 -->
				<!-- ===================================================================== -->
				<u-table v-if="type === 1">
					<u-tr>
						<u-th>开平日期</u-th>
						<u-th>品种合约</u-th>
						<u-th>类型</u-th>
						<u-th>数量</u-th>
						<u-th>开平价</u-th>
						<u-th>平仓盈亏</u-th>
					</u-tr>
					<u-tr v-for="(item, key) in moreData" :key="key">
						<u-td>
							<view>
								{{item.open_date ? item.open_date : '-'}}<br />——<br />{{item.close_date ? item.close_date : '-'}}
							</view>
						</u-td>
						<u-td>
							<view>{{item.qihuoname}}</view>
						</u-td>
						<u-td v-if="item.b_s=='买'"> <text class="text_back redbackground">买</text></u-td>
						<u-td v-else><text class="text_back greenbackground">卖</text></u-td>
						<u-td>
							<view>{{item.positon}}</view>
						</u-td>
						<u-td>
							<view>{{formatNum(item.open_price)}}<br />——<br />{{formatNum(item.trans_price)}}</view>
						</u-td>
						<u-td>
							<view>{{formatNum(item.profit_loss)}}</view>
						</u-td>
					</u-tr>
				</u-table>
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		transactions,
		closeList
	} from '@/api/addons.js'
	export default {
		data() {
			return {
				type: 0,
				status: 'loadmore',
				id: '',
				page: 1,
				limit: 20,
				moreData: [],
				keyword: '',
				mobile: '',
				isLoading: true,
				startime: '',
				endtime: '',
				show: false,
				mode: 'range',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onReachBottom() {
			// if(this.page >= 3) return ;
			this.status = 'loading';
			// this.page = ++ this.page;
			setTimeout(() => {
				this.moreFn()
				// 	this.list += 10;
				// 	if(this.page >= 3) this.status = 'nomore';
				// 	else this.status = 'loading';
			}, 2000)


		},
		onLoad(query) {
			this.id = query.id
			this.type = Number(query.type)
			uni.setNavigationBarTitle({
				title: this.type === 1 ? "平仓记录" : "成交记录"
			})
			this.moreFn()
		},
		methods: {
			formatNum(val) {
				if (val && isFinite(val) && !isNaN(val)) {
					return Number(Number(val).toFixed(2))
				}
				return '0.00'
			},
			moreFn() {
				const that = this
				let data = {
					room: that.id,
					page: that.page,
					limit: that.limit,
					startday: that.startime,
					endday: that.endtime
				}
				const fn = (res) => {
					let num = res.data.length
					for (let i = 0; i < num; i++) {
						that.moreData.push(res.data[i])
					}
					that.page += 1
					if (num == 0) {
						uni.showToast({
							title: '没有更多了',
							icon: 'none'
						});
						that.status = 'nomore';
					}
				}
				if (that.type === 0) {
					that.reqTransactions(data, fn)
				} else {
					that.reqCloseList(data, fn)
				}
			},
			change(e) {
				const that = this
				that.startime = e.startDate
				that.endtime = e.endDate
				that.mobile = e.startDate + ' 至 ' + e.endDate
				that.page = 1
				that.moreData = []
				let data = {
					room: that.id,
					page: that.page,
					limit: that.limit,
					startday: e.startDate,
					endday: e.endDate
				}
				const fn = (res) => {
					let num = res.data.length
					for (let i = 0; i < num; i++) {
						that.moreData.push(res.data[i])
					}
					that.status = 'nomore';
					that.page += 1
					that.isLoading = false
				}
				if (that.type === 0) {
					that.reqTransactions(data, fn)
				} else {
					that.reqCloseList(data, fn)
				}
			},
			// 请求成交记录
			reqTransactions(data, callback) {
				transactions(data).then(res => {
					if (res.code == 200) {
						callback && callback(res)
					}
				})
			},
			// 请求平仓记录
			reqCloseList(data, callback) {
				closeList(data).then(res => {
					if (res.code == 200) {
						callback && callback(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.more_text {
		height: 22px;
		color: #fff;
		border-radius: 2px;
		padding: 0 3px;
		width: 100%;
		/* width: 40px; */
	}

	.text_back {
		height: 22px;
		line-height: 22px;
		color: #fff;
		border-radius: 2px;
	}

	.redbackground {
		background-color: rgb(231, 76, 60) !important;
	}

	.greenbackground {
		background-color: rgb(68, 184, 94) !important;
	}

	.tr_bottom {
		border-bottom: 1rpx solid #e8e8e8;
	}

	.card-table {
		border: none !important;
	}

	.table-tr {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
	}

	.table-th1 {
		border: none !important;
		width: 22%;
		text-align: center;
	}

	.table-th2 {
		border: none !important;
		width: 38%;
		text-align: center;
	}

	.table-th3 {
		border: none !important;
		width: 10%;
		text-align: center;
	}

	.table-th4 {
		border: none !important;
		width: 10%;
		text-align: center;
	}

	.table-th5 {
		border: none !important;
		width: 20%;
		text-align: center;
	}

	.table-td1 {
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 22%;
	}

	.table-td2 {
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 38%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.table-td3 {
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 10%;
	}

	.table-td4 {
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 10%;
	}

	.table-td5 {
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 20%;
	}

	.more {
		padding: 10px;
		text-align: center;
		color: #999999;
	}

	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	/deep/ .card-body {
		padding-bottom: 30rpx;
	}

	/deep/ .card-table {
		border: none !important;
		background-color: #F4F5F6 !important;
	}

	/deep/ .table-tr {
		height: 64rpx;
	}

	/deep/ .table-th {
		border: none !important;
		font-weight: 400;
	}

	/deep/ .table-td {
		border: none !important;
		line-height: 1;
		padding: 10px 3px;
		text-align: center;
	}

	.close1 {
		// width: 104rpx;
		width: 20%;
		flex: 0 0 20%;
	}

	.close2 {
		// width: 100rpx;
		width: 30%;
		flex: 0 0 30%;
	}

	.close3 {
		// width: 100rpx;
		width: 15%;
		flex: 0 0 15%;
	}

	.close4 {
		width: 15%;
		flex: 0 0 15%;
	}

	.close5 {
		width: 20%;
		flex: 0 0 20%;
	}

	.close6 {
		width: 25%;
		flex: 0 0 25%;
	}
</style>
